<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>删除代码 - {{ code.title }} - Creeps</title>
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
                min-height: 100vh;
                position: relative;
            }

            body::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(100, 150, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
                pointer-events: none;
                z-index: -1;
            }

            .container {
                background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
                backdrop-filter: blur(15px);
                padding: 40px;
                border-radius: 20px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 150, 255, 0.2),
                    inset 0 0 15px rgba(255, 255, 255, 0.05);
                border: 2px solid;
                border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(100, 150, 255, 0.6)) 1;
                text-align: center;
                color: rgba(255, 255, 255, 0.9);
            }

            .header {
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid;
                border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(100, 150, 255, 0.5)) 1;
            }

            .header h1 {
                margin: 0;
                background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffffff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-size: 2.5rem;
                font-weight: 700;
                text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
                filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.3));
            }

            .warning-icon {
                font-size: 4rem;
                background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 25px;
                filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.4));
                animation: pulse 2s infinite;
            }

            @keyframes pulse {
                0%,
                100% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.05);
                }
            }

            .warning-message {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.9);
                margin-bottom: 35px;
                line-height: 1.6;
                background: rgba(255, 107, 107, 0.1);
                padding: 20px;
                border-radius: 15px;
                border: 2px solid rgba(255, 107, 107, 0.3);
                backdrop-filter: blur(10px);
            }

            .warning-message strong {
                color: rgba(255, 107, 107, 0.9);
                font-weight: 700;
            }

            .code-info {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(100, 150, 255, 0.1));
                padding: 25px;
                border-radius: 15px;
                margin-bottom: 35px;
                text-align: left;
                backdrop-filter: blur(10px);
                border: 2px solid rgba(255, 255, 255, 0.2);
            }

            .code-title {
                font-weight: 700;
                font-size: 1.4rem;
                margin-bottom: 15px;
                color: rgba(100, 150, 255, 0.9);
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .code-meta {
                color: rgba(255, 255, 255, 0.8);
                margin-bottom: 8px;
                font-size: 1rem;
                background: rgba(255, 255, 255, 0.05);
                padding: 8px 12px;
                border-radius: 8px;
                border-left: 3px solid rgba(100, 150, 255, 0.5);
            }

            .btn {
                display: inline-block;
                padding: 15px 30px;
                text-decoration: none;
                border-radius: 25px;
                font-weight: 600;
                font-size: 1.1rem;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                margin: 0 15px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(10px);
                position: relative;
                overflow: hidden;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s ease;
            }

            .btn:hover::before {
                left: 100%;
            }

            .btn-danger {
                background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(255, 100, 100, 0.8));
                color: white;
                border: 2px solid rgba(220, 53, 69, 0.5);
            }

            .btn-danger:hover {
                background: linear-gradient(135deg, rgba(220, 53, 69, 1), rgba(255, 100, 100, 1));
                border-color: rgba(255, 100, 100, 0.8);
                transform: perspective(500px) rotateX(5deg) rotateY(5deg) translateZ(10px) translateY(-3px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(220, 53, 69, 0.4), 0 0 15px rgba(255, 255, 255, 0.2);
                color: white;
                text-decoration: none;
            }

            .btn-secondary {
                background: linear-gradient(135deg, rgba(108, 117, 125, 0.8), rgba(90, 98, 104, 0.8));
                color: white;
                border: 2px solid rgba(108, 117, 125, 0.5);
            }

            .btn-secondary:hover {
                background: linear-gradient(135deg, rgba(108, 117, 125, 1), rgba(90, 98, 104, 1));
                border-color: rgba(108, 117, 125, 0.8);
                transform: perspective(500px) rotateX(5deg) rotateY(5deg) translateZ(10px) translateY(-3px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(108, 117, 125, 0.4), 0 0 15px rgba(255, 255, 255, 0.2);
                color: white;
                text-decoration: none;
            }

            .actions {
                margin-top: 40px;
                display: flex;
                justify-content: center;
                gap: 20px;
            }



            /* 响应式设计 */
            @media (max-width: 768px) {
                body {
                    padding: 15px;
                }

                .container {
                    padding: 25px;
                }

                .header h1 {
                    font-size: 2rem;
                }

                .warning-icon {
                    font-size: 3rem;
                }

                .warning-message {
                    font-size: 1.1rem;
                    padding: 15px;
                }

                .actions {
                    flex-direction: column;
                    gap: 15px;
                }

                .btn {
                    margin: 0;
                    padding: 12px 25px;
                    font-size: 1rem;
                }
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="header">
                <h1>删除代码</h1>
            </div>

            <div class="warning-icon">⚠️</div>

            <div class="warning-message">
                <p>您确定要删除此代码吗？此操作<strong>不可撤销</strong>，所有相关的版本历史也将被删除。</p>
            </div>

            <div class="code-info">
                <div class="code-title">{{ code.title }}</div>
                <div class="code-meta">语言: {{ code.get_language_display }}</div>
                <div class="code-meta">版本数: {{ code.get_version_count }}</div>
                <div class="code-meta">创建时间: {{ code.created_at|date:"Y-m-d H:i" }}</div>
                {% if code.description %}
                <div class="code-meta">描述: {{ code.description|truncatechars:100 }}</div>
                {% endif %}
            </div>

            <form method="post">
                {% csrf_token %}
                <div class="actions">
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </div>
            </form>
        </div>
    </body>
</html>
